<template>
  <div>
    <!--卡片组件-->
    <el-card>

      <!--卡片顶部添加品牌按扭-->
      <el-button type="primary" size="default" icon="Plus" @click="addTrademark">添加品牌</el-button>
      <!--表格组件：展示已有的数据-->
      <!--
        table
        ---border:设置表格纵向边框
        ---data：展示的表格数据
        table-column
        ---label：设置标题列
        ---width：设置列宽
        ---align：设置列对齐方式
      -->
      <el-table style="margin: 10px 0" border :data="trademarkArr">
        <!-- 第一列-->
        <el-table-column label="序号" width="80px" align="center" type="index"></el-table-column>

        <!--第二列-->
        <el-table-column label="品牌名称" prop="tmName" align="center"></el-table-column>

        <!--第三列-->
        <el-table-column label="品牌LOGO" align="center">
          <template #="{row}">
            <img :src="row.logoUrl" alt="图片未找到" style="width: 75px;height: 75px">
          </template>
        </el-table-column>

        <!--第四列-->
        <el-table-column label="创建时间" prop="createTime" align="center">

        </el-table-column>

        <!--第五列-->
        <el-table-column label="品牌操作">
          <template #="{row}">
            <el-button type="primary" size="small" icon="Edit" @click="updateTrademark(row)"></el-button>
            <el-popconfirm :title="`您确定要删除 '${row.tmName}' 吗？`" width="250px" icon="Delete"
                           @confirm="removeTrademark(row.id)">
              <template #reference>
                <el-button type="danger" size="small" icon="Delete"></el-button>
              </template>
            </el-popconfirm>
          </template>

        </el-table-column>
      </el-table>

      <!--分页器组件
        pagination
          v-model:current-page:设置分页器当前页码
          v-model:page-size:设置每页展示数据的条数
          page-sizes:用于设置下拉菜单数据
          :background : 分页器背景按扭颜色
          layout:可以设置 分页器 六个子组件的位置
      -->
      <el-pagination
          @current-change="getHasTrademark"
          @size-change="sizeChange"
          v-model:current-page="pageNo"
          v-model:page-size="pagelimt"
          :page-sizes="[5,7,11,13]"
          :background="true"
          layout="prev,pager,next,jumper,->,sizes,total"
          :total="total"/>

    </el-card>

    <!--对话框组件，添加/修改已有商品业务
    v-model:用于控制对话框，bool 显示/隐藏
    title:设置左上角标题

    -->
    <el-dialog v-model="dialogFormVisible" :title="newTrademark.id?'修改品牌':'添加品牌'">
      <el-form style="width: 80%" :model="newTrademark" :rules="rules" ref="formRef">
        <!--品牌名称-->
        <el-form-item label="品牌名称 : " label-width="100px" prop="tmName">
          <el-input placeholder="请您输入品牌名称" v-model="newTrademark.tmName"></el-input>
        </el-form-item>

        <!--品牌logo-->
        <el-form-item label="品牌LOGO : " label-width="100px" prop="logoUrl">
          <!--upload
          action:上传到的服务器地址,走的不是自己封装的request，因此需要补充全部的url
          before-upload：文件上传之前，执行的方法，会注入上传的文件
          on-success：文件上传成功时的钩子，会注入服务器返回的数据

          -->
          <el-upload
              class="avatar-uploader"
              action="/api/admin/product/fileUpload"
              :show-file-list="false"
              :on-success="handleSuccess"
              :before-upload="beforeLogoUpload">
            <img v-if="newTrademark.logoUrl" :src="newTrademark.logoUrl" class="avatar"/>
            <el-icon v-else class="avatar-uploader-icon">
              <Plus/>
            </el-icon>
          </el-upload>

        </el-form-item>
      </el-form>
      <!--具名插槽：footer-->
      <template #footer>
        <el-button type="danger" @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </template>

    </el-dialog>

  </div>
</template>

<script setup lang="ts">
import {ref, onMounted, reactive, nextTick} from "vue";
//@ts-ignore
import {reqHadTrademark, reqAddOrUpdateTrademark, reqDeleteTrademark} from "@/api/product/trademark/trademarkApi.ts";
//@ts-ignore
import {T_TradeMark, T_TradeMarkResponseData} from "@/api/product/trademark/type.ts";
import {ElMessage, ElNotification, UploadProps} from "element-plus";
//当前页码
let pageNo = ref<number>(1);
//每页展示数据的条数
let pagelimt = ref<number>(5);
//存储已有品牌数据的总数
let total = ref<number>(0);
//存储已有品牌的数据数组
let trademarkArr = ref<T_TradeMark[]>([]);
//控制对话框的显示与隐藏
let dialogFormVisible = ref<boolean>(false);
//定义收集新增品牌的数据
let newTrademark = reactive<T_TradeMark>({
  tmName: '',
  logoUrl: ''
})
//获取el-form组件实例
let formRef = ref();

//获取已有品牌的数据函数
const getHasTrademark = async (pager = 1) => {
  pageNo.value = pager;
  let result: T_TradeMarkResponseData = await reqHadTrademark(pageNo.value, pagelimt.value);
  if (result.code == 200) {
    total.value = result.data.total
    trademarkArr.value = result.data.records;//获取商品数据数组
  }
};

//组件挂在完毕钩子 --发送请求，获取第一页的数据
onMounted(() => {
  getHasTrademark();
});

//分页器，页码发生变化时，会触发该方法
// const changePageNo = () => {
//   //当前页码发生变化时，再次发送请求 获取数据
//   getHasTrademark();
// };

//当size下拉菜单发生变化时，触发该方法
const sizeChange = () => {
  pageNo.value = 1;//size发生变化时，页码回到第一页
  getHasTrademark();
};

//添加品牌方法的回调
const addTrademark = () => {
  //保证每次添加前先清空数据
  newTrademark.logoUrl = '';
  newTrademark.tmName = '';
  newTrademark.id = undefined; //清空id
  //对话框显示
  dialogFormVisible.value = true;

  //第一种方法
  //清空校验结果,?表示，有clearValidate调用，没有不调用
  // formRef.value?.clearValidate('tmName');
  // formRef.value?.clearValidate('logoUrl');

  //第二种方法 等待dom树更新完成再调用
  nextTick(() => {
    formRef.value.clearValidate('tmName');
    formRef.value.clearValidate('logoUrl');
  })


};

//修改品牌的回调
const updateTrademark = (row: T_TradeMark) => {
  nextTick(() => {
    //清空校验规则的错误 提示信息
    formRef.value.clearValidate('tmName');
    formRef.value.clearValidate('logoUrl');
  })
  //对话框显示
  dialogFormVisible.value = true;
  //展示已有品牌数据
  // newTrademark.id = row.id;
  // newTrademark.tmName = row.tmName;
  // newTrademark.logoUrl = row.logoUrl;
  Object.assign(newTrademark, row);//将row中的字段赋值给newTrademark
}

//取消的回调
const cancel = () => {
  dialogFormVisible.value = false;
};
//确定的回调
const confirm = async () => {
  //校验所有表单项是否通过
  await formRef.value.validate();//保证成功后再执行后面
  let result: any = await reqAddOrUpdateTrademark(newTrademark);
  if (result.code == 200) {
    //添加成功
    //关闭对话框
    dialogFormVisible.value = false;
    //提示信息
    ElMessage({
      type: 'success',
      message: newTrademark.id ? '修改品牌成功' : '添加品牌成功',
    });
    //重新获取数据
    getHasTrademark(newTrademark.id ? pageNo.value : 1);
  } else {
    //添加失败
    ElMessage({
      type: 'error',
      message: newTrademark.id ? '修改品牌失败' : '添加品牌失败'
    })
    //关闭对话框
    dialogFormVisible.value = false;
  }

};

//图片上传之前的钩子函数
const beforeLogoUpload: UploadProps['beforeUpload'] = (rawFile) => {
  //钩子在图片上传之前执行，约束类型、大小.size(字节)
  //要求：格式：png|jpg|gif  大小<4M
  if (rawFile.type == 'image/png' || rawFile.type == 'image/jpeg' || rawFile.type == 'image/gif') {
    if (rawFile.size / 1024 / 1024 < 4) {
      return true;
    } else {
      ElNotification({
        type: "error",
        message: "请上传小于4M的图片"
      })
      return false;
    }

  } else {
    ElNotification({
      type: "error",
      message: "请上传图片格式（.png/.jpg/.gif）"
    })
    return false;
    //不能上传
  }
};

//上传成功服务器的钩子
const handleSuccess: UploadProps['onSuccess'] = (response) => {
  //response :服务器返回的数据
  newTrademark.logoUrl = response.data;//把上传到服务器返回的图片地址赋值给新的商标logourl
  //图片上传成功，清空logo的字段校验信息
  formRef.value.clearValidate('logoUrl');
};


//自定义校验方法
//@ts-ignore
const validatorTmName = (rule: any, value: any, callBack: any) => {
  //自定义校验规则
  if (value.trim().length >= 2) {
    callBack();
  } else {
    callBack(new Error('长度至少为2位'));
  }
};

//@ts-ignore
const validatorLogoUrl = (rule: any, value: any, callBack: any) => {
  if (value) {
    callBack();
  } else {
    callBack(new Error('请上传品牌LOGO'));
  }

};

//表单校验规则对象
const rules = {
  tmName: [
    {required: true, trigger: 'blur', validator: validatorTmName},
  ],
  logoUrl: [{require: true, validator: validatorLogoUrl}]
}


//删除数据回调函数
const removeTrademark = async (id: number) => {
  let result = await reqDeleteTrademark(id);
  if (result.code == 200) {
    ElMessage({
      type: 'success',
      message: '删除品牌成功'
    });
    getHasTrademark(trademarkArr.value.length > 1 ? pageNo.value : pageNo.value - 1);
  } else {
    ElMessage({
      type: 'error',
      message: '删除品牌失败'
    })
  }
}


</script>


<style>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>